import { CheckCard } from '@ant-design/pro-components';

export default () => (
  <>
    <CheckCard
      cover={
        <img
          alt="example"
          height={240}
          src="https://gw.alipayobjects.com/mdn/rms_66ee3f/afts/img/A*FyH5TY53zSwAAAAAAAAAAABkARQnAQ"
        />
      }
    />
    <CheckCard
      cover={
        'https://gw.alipayobjects.com/mdn/rms_66ee3f/afts/img/A*FyH5TY53zSwAAAAAAAAAAABkARQnAQ'
      }
    />

    <div
      style={{
        marginTop: '20px',
        padding: '20px',
        backgroundColor: '#f5f5f5',
        borderRadius: '6px',
      }}
    >
      <h4>CheckCard Cover Props 说明：</h4>
      <ul>
        <li>
          <strong>cover</strong>: 卡片封面，可以是图片 URL 字符串或 React 节点
        </li>
      </ul>
      <h4>Cover 使用方式：</h4>
      <ul>
        <li>
          <strong>字符串</strong>: 直接传入图片 URL，会自动渲染为 img 标签
        </li>
        <li>
          <strong>组件</strong>: 传入 img 标签或其他 React
          节点，可以自定义样式和属性
        </li>
      </ul>
      <h4>Img 标签 Props：</h4>
      <ul>
        <li>
          <strong>alt</strong>: 图片的替代文本，用于无障碍访问
        </li>
        <li>
          <strong>height</strong>: 图片高度，可以是数字或字符串
        </li>
        <li>
          <strong>src</strong>: 图片源地址
        </li>
        <li>
          <strong>width</strong>: 图片宽度，可以是数字或字符串
        </li>
        <li>
          <strong>style</strong>: 图片样式对象
        </li>
      </ul>
      <h4>Cover 特点：</h4>
      <ul>
        <li>
          <strong>自动适配</strong>: 字符串形式的 cover 会自动适配卡片宽度
        </li>
        <li>
          <strong>自定义样式</strong>: 组件形式可以完全控制图片的样式和属性
        </li>
        <li>
          <strong>响应式</strong>: 支持响应式布局，图片会随卡片大小调整
        </li>
      </ul>
    </div>
  </>
);
